<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="css/Admin_Search.css">
</head>
<body>

<div class="page-header">
    <h1>欢迎进入管理员查询系统</h1>
</div>



<div class="menu-container">
    <ul class="nav_nav-pills">
        <li role="话费查询" class="active"><a href="AdMinistrators_Search.html">话费查询</a></li>
        <li role="流量查询"><a href="Administrators_Search_LiuLiang.html">流量查询</a></li>
        <li role="套餐查询"><a href="Administrators_Search_Packge.html">套餐查询</a></li>
        <li role="封禁查询"><a href="Administrators_Base.html">返回主页</a></li>
    </ul>
</div>

<div class="Search">

    <div class="input-group_input-group-lg">
        <ul class="elem">
            <li>搜索</li>
            <span>电话号码</span>
            <input type="text" class="form-control" id="phoneNumber" placeholder="请输入用户的手机号码" aria-describedby="sizing-addon1" >
            <button onclick="searchUser()" type="button" class="form-control_button">点击查询</button>
        </ul>
    </div>

</div>
<div id="userDetails" class="user-details"></div>



<script src="jquery-1.12.4.min.js"></script>
<script src="bootstrap.js"></script>
<script>
    function searchUser() {
        var phoneNumber = document.getElementById("phoneNumber").value;
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/search?phoneNumber=" + phoneNumber, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // alert("success");
                var user = JSON.parse(xhr.responseText);
                displayUserDetails(user);
            } else if (xhr.readyState == 4 && xhr.status == 404) {
                alert("falied");
                document.getElementById("userDetails").innerHTML = "User not found.";
            }
        };
        xhr.send();
    }

    function displayUserDetails(user) {
        // var keys = Object.keys(user);
        // alert(keys);
        var userDetailsDiv = document.getElementById("userDetails");
        var genderText = user.gender === 1 ? "男性" : "女性";
        userDetailsDiv.innerHTML =
            "电话号码：" + user.phoneNumber + "<br/>" +"<br/>"+
            "用户名：" + user.userName + "<br/>" +"<br/>"+
            "性别：" + genderText + "<br/>" +"<br/>"+
            "身份证号码：" + user.idCardNumber + "<br/>" +"<br/>"+
            "流量余额：" + user.dataBalance + "<br/>" +"<br/>"+
            "封禁状态：" + user.banStatus;

    }
</script>
</body>
</html>